<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="90px" style="height:auto">
				<el-row>
					<el-col :span="4">
						<el-form-item label="券商品名称" prop="productName">
							<el-input type="text" v-model="queryForm.productName" placeholder="请输入券商品名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="发放渠道" prop="saleChannel">
							<el-select v-model="queryForm.saleChannel" placeholder="请选择渠道">
								<el-option label="全部" value=""></el-option>
								<el-option label="微信小程序" value="0"></el-option>
								<el-option label="商家/供应商" value="1"></el-option>
								<el-option label="直播平台" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="销售状态" prop="status">
							<el-select v-model="queryForm.status" placeholder="请选择状态">
								<el-option label="全部" value=""></el-option>
								<el-option label="上架" value="1"></el-option>
								<el-option label="下架" value="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="创建时间" prop="time">
							<el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp" align="right" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<!-- 主体部分 -->
		<template>
			<!-- 表格上方的按钮 -->
			<div class="table-header">
				<el-button type="primary" @click="addPage()">新增消费券商品</el-button>
			</div>

			<!-- 表格 -->
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				<el-table-column prop="mainImage" label="商品主图" width="96" align="center">
					<template slot-scope="scope">
						<el-image style="width: 60px; height: 60px" v-if="scope.row.mainImage != ''" :src="scope.row.mainImage"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="消费券名称(前端展示)" width="160"></el-table-column>
				<el-table-column prop="productShowName" label="消费券名称(后台展示)" width="160"></el-table-column>
				
				<el-table-column prop="saleChannel" label="发放渠道" align="center" width="100">
					<template slot-scope="scope">
						<el-tag size="small" v-if="scope.row.saleChannel == 1">商家/供应商</el-tag>
						<el-tag size="small" type="warning" v-else-if="scope.row.saleChannel == 2">直播平台</el-tag>
						<el-tag size="small" type="success" v-else>微信小程序</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="couponType" label="券类型" align="center" width="120">
					<template slot-scope="scope">
						<el-tag size="small" type="danger" v-if="scope.row.couponType == 1">新人礼券</el-tag>
						<el-tag size="small" type="warning" v-else-if="scope.row.couponType == 2">直播间叠加券</el-tag>
						<el-tag size="small" type="success" v-else>小程序充值券</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="couponDenomination" label="消费券面额(元)" width="120" align="center"></el-table-column>
				<el-table-column prop="couponPrice" label="销售金额(元)" width="110" align="center"></el-table-column>
				<el-table-column prop="couponCredits" label="积分兑换金额" width="100" align="center">
					<template slot-scope="scope">
						{{scope.row.couponCredits}}积分
					</template>
				</el-table-column>
				
				<el-table-column prop="stock" label="可售库存" width="80" align="center"></el-table-column>
				<el-table-column prop="stockForzen" label="冻结库存" width="80" align="center"></el-table-column>
				<el-table-column prop="stockSold" label="已售库存" width="80" align="center"></el-table-column>
				<el-table-column prop="stockHistory" label="累计库存" width="80" align="center"></el-table-column>
				
				<el-table-column prop="status" label="销售状态" width="90" align="center">
					<template slot-scope="scope">
						<el-tag type="warning" v-if="scope.row.status==0">下架</el-tag>
						<el-tag type="success" v-if="scope.row.status==1">上架</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="100" :formatter="forDateCreate"></el-table-column>
				
				<el-table-column label="操作" fixed="right" width="222">
					<template slot-scope="scope">
						<div>
							<el-button type="primary" size="small" @click.native.prevent="detailPage(scope.row.id)">详情</el-button>
							<el-button v-if="scope.row.status==0" plain type="primary" size="small" @click="updateStatus(scope.row, 1)">上架</el-button>
							<el-button v-if="scope.row.status==1" plain type="primary" size="small" @click="updateStatus(scope.row, 0)">下架</el-button>
							<el-button type="warning" plain size="small" @click.native.prevent="updatePage(scope.row.id, scope.row.status)">编辑</el-button>
						</div>
						<div style="margin-top: 6px;">
							<el-button type="danger" plain size="small" @click.native.prevent="deleteRow(scope.row)">删除</el-button>
							<el-button type="success" plain size="small" @click.native.prevent="updatePricePage(scope.row.id, scope.row.status)">调价</el-button>
							<el-button type="success" plain size="small" @click.native.prevent="addStockPage(scope.row.id)">加库存</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>

		<!-- 弹框 -->
		<template>
			<!-- 详情弹框 -->
			<el-dialog title="消费券详情" width="60%" :visible.sync="detailDialog">
				<div class="form-area">
					<el-form ref="detailForm" :model="detailForm" label-width="120px" style="height:auto">
						<div class="form-title">
							<h3>基本信息</h3>
						</div>
						<el-row>
							<el-col :span="12">
								<el-form-item label="前端展示名称" prop="productName">
									<el-input type="text" v-model="detailForm.productName" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="后端展示名称" prop="productShowName">
									<el-input type="text" v-model="detailForm.productShowName" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="状态" prop="status">
									<el-input type="text" :value="detailForm.status == 1 ? '上架' : '下架'" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="发放渠道" prop="saleChannel">
									<el-input type="text" :value="detailForm.saleChannel == 2 ? '直播平台' : detailForm.saleChannel == 1 ? '商家/供应商' : '微信小程序'" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="券类型" prop="couponType">
									<el-input type="text" :value="detailForm.couponType == 1 ? '新人礼券' : detailForm.couponType == 2 ? '直播间叠加券' : '小程序充值券'" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="消费券商品编码" prop="productCode">
									<el-input type="text" v-model="detailForm.productCode" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="消费券面额(元)" prop="couponDenomination">
									<el-input type="text" v-model="detailForm.couponDenomination" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="销售金额(元)" prop="couponPrice">
									<el-input type="text" v-model="detailForm.couponPrice" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="积分兑换金额" prop="couponCredits">
									<el-input type="text" v-model="detailForm.couponCredits" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="库存数量" prop="stockHistory">
									<el-input type="text" v-model.number="detailForm.stockHistory" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="可售库存" prop="stock">
									<el-input type="text" v-model="detailForm.stock" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="冻结库存" prop="stockForzen">
									<el-input type="text" v-model="detailForm.stockForzen" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="已售库存" prop="stockSold">
									<el-input type="text" v-model="detailForm.stockSold" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="备注" prop="remark">
									<el-input type="textarea" :rows="5" v-model="detailForm.remark" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品主图" prop="mainImage">
									<el-card shadow="hover" class="el-card-logo">
										<el-image :src="detailForm.mainImage">
											<div slot="error" class="image-slot">
												<i>商品主图不存在</i>
											</div>
										</el-image>
									</el-card>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="商品缩略图" prop="thumbImage">
									<el-card shadow="hover" class="el-card-logo">
										<el-image :src="detailForm.thumbImage">
											<div slot="error" class="image-slot">
												<i>商品缩略图不存在</i>
											</div>
										</el-image>
									</el-card>
								</el-form-item>
							</el-col>
						</el-row>

						<div class="form-title">
							<h3>系统信息</h3>
						</div>

						<el-row>
							<el-col :span="12">
								<el-form-item label="创建人" prop="creatorId">
									<el-input type="text" v-model="detailForm.creatorId" placeholder="创建人"
										readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="创建世间" prop="createTime">
									<el-date-picker v-model="detailForm.createTime" type="datetime" placeholder="修改时间" readonly style="width: 100%;"></el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="修改人" prop="reviserId">
									<el-input type="text" v-model="detailForm.reviserId" placeholder="修改人" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="修改时间" prop="reviseTime">
									<el-date-picker v-model="detailForm.reviseTime" type="datetime" placeholder="修改时间" readonly style="width: 100%;"></el-date-picker> </el-form-item>
							</el-col>
						</el-row>

					</el-form>
				</div>

				<div class="dialog-footer" slot="footer">
					<el-button @click="detailDialog =false">返回</el-button>
				</div>
			</el-dialog>

			<!-- 新增弹框 -->
			<el-dialog title="新增消费券" width="60%" :visible.sync="addDialog">
				<div class="form-area">
					<el-form ref="addForm" :model="addForm" :rules="addRules" label-width="120px" style="height:auto">
						<div class="form-title">
							<h3>基本信息</h3>
						</div>
						<el-row>
							<el-col :span="12">
								<el-form-item label="前端展示名称" prop="productName">
									<el-input type="text" v-model="addForm.productName" placeholder="请输入消费券商品名称"></el-input>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="后台展示名称" prop="productShowName">
									<el-input type="text" v-model="addForm.productShowName" placeholder="请输入消费券商品名称"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="状态" prop="status">
									<el-radio-group v-model="addForm.status">
										<el-radio label="0" border>下架</el-radio>
										<el-radio label="1" border>上架</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="发放渠道" prop="saleChannel">
									<el-select v-model="addForm.saleChannel" placeholder="选择发放渠道" style="width: 100%;" @change="chooseSaleChannel">
										<el-option label="微信小程序" value="0"></el-option>
										<!-- <el-option label="商家/供应商" value="1"></el-option> -->
										<el-option label="直播平台" value="2"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="券类型" prop="couponType">
									<el-select v-model="addForm.couponType" placeholder="选择券类型" style="width: 100%;">
										<el-option label="小程序充值券" value="0" v-if="addForm.saleChannel == 0"></el-option>
										<el-option label="直播间叠加券" value="2" v-if="addForm.saleChannel == 2"></el-option>
										<el-option label="新人礼券" value="1" v-if="addForm.saleChannel == 2"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="消费券商品编码" prop="productCode">
									<el-input type="text" v-model="addForm.productCode"
										placeholder="请输入消费券商品编码"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="消费券面额(元)" prop="couponDenomination">
									<el-input type="text" v-model="addForm.couponDenomination" placeholder="请输入消费券面额"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="销售金额(元)" prop="couponPrice">
									<el-input type="text" v-model="addForm.couponPrice" placeholder="请输入销售金额"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="积分兑换金额" prop="couponCredits">
									<el-input type="text" v-model="addForm.couponCredits" placeholder="请输入积分兑换值"></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="库存数量" prop="stockHistory">
									<el-input type="text" v-model.number="addForm.stockHistory" placeholder="请输入库存数量" @blur="getStock()"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="可售库存" prop="stock">
									<el-input type="text" v-model="addForm.stock" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="冻结库存" prop="stockForzen">
									<el-input type="text" v-model="addForm.stockForzen" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="已售库存" prop="stockSold">
									<el-input type="text" v-model="addForm.stockSold" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品主图" prop="mainImage">
									<el-card shadow="hover" class="el-card-logo">
										<el-image :src="imgMainImageObject.localMainImage">
											<div slot="error" class="image-slot">
												<i>请添加商品主图</i>
											</div>
										</el-image>
									</el-card>
									
									<div style="margin-top: 12px;">
										<el-button type="primary" plain long @click="addMainImagePic" icon="md-add">添加图片</el-button>
										<div style="line-height: 20px; color: red; margin-top: 10px;">温馨提示：请上传256*256像素的PNG、JPG格式的图片，大小不超过2M。</div>
									</div>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="商品缩略图" prop="thumbImage">
									<el-card shadow="hover" class="el-card-logo">
										<el-image :src="imgThumbImageObject.localMainImage">
											<div slot="error" class="image-slot">
												<i>请添加商品缩略图</i>
											</div>
										</el-image>
									</el-card>

									<div style="margin-top: 12px;">
										<el-button type="primary" plain long @click="addThumbImagePic" icon="md-add"> 添加图片</el-button>
										<div style="line-height: 20px; color: red; margin-top: 10px;">温馨提示：请上传256*256像素的PNG、JPG格式的图片，大小不超过2M。</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="备注" prop="remark">
									<el-input type="textarea" :rows="5" v-model="addForm.remark" placeholder="请输入备注"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>

				<div class="dialog-footer" slot="footer">
					<el-button type="primary" @click="addSubmit('addForm')">保存</el-button>
					<el-button @click="addDialog =false">取消</el-button>
				</div>
				
				<uploadImage
					:pageStatus="isMainImagePic"
					@on-change="onMainImagePicChange"
					@on-result="onMainImagePicResultAddPage"
					:pageData="imgType"
					@on-click="addMainImagePic"
				></uploadImage>
				
				<uploadImage
					:pageStatus="isThumbImagePic"
					@on-change="onThumbImagePicChange"
					@on-result="onThumbImagePicResultAddPage"
					:pageData="imgType"
					@on-click="addThumbImagePic"
				></uploadImage>
			</el-dialog>

			<!-- 编辑弹框 -->
			<el-dialog title="编辑消费券" width="60%" :visible.sync="updateDialog">
				<div class="form-area">
					<el-form ref="updateForm" :model="updateForm" :rules="updateRules" label-width="120px" style="height:auto">
						<div class="form-title">
							<h3>基本信息</h3>
						</div>
						<el-row>
							<el-col :span="12">
								<el-form-item label="前端展示名称" prop="productName">
									<el-input type="text" v-model="updateForm.productName" placeholder="请输入消费券商品名称"></el-input>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="后台展示名称" prop="productShowName">
									<el-input type="text" v-model="updateForm.productShowName" placeholder="请输入消费券商品名称"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="状态" prop="status">
									<el-input type="text":value="updateForm.status == 1 ? '上架' : '下架'" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="发放渠道" prop="saleChannel">
									<el-select v-model="updateForm.saleChannel" placeholder="选择发放渠道" style="width: 100%;" @change="chooseSaleChannel2">
										<el-option label="微信小程序" value="0"></el-option>
										<!-- <el-option label="商家/供应商" value="1"></el-option> -->
										<el-option label="直播平台" value="2"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="券类型" prop="couponType">
									<el-select v-model="updateForm.couponType" placeholder="选择券类型" style="width: 100%;">
										<el-option label="小程序充值券" value="0" v-if="updateForm.saleChannel == 0"></el-option>
										<el-option label="直播间叠加券" value="2" v-if="updateForm.saleChannel == 2"></el-option>
										<el-option label="新人礼券" value="1" v-if="updateForm.saleChannel == 2"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="消费券商品编码" prop="productCode">
									<el-input type="text" v-model="updateForm.productCode" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="消费券面额(元)" prop="couponDenomination">
									<el-input type="text" v-model="updateForm.couponDenomination" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="销售金额(元)" prop="couponPrice">
									<el-input type="text" v-model="updateForm.couponPrice" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="积分兑换金额" prop="couponCredits">
									<el-input type="text" v-model="updateForm.couponCredits" placeholder="请输入积分兑换值"></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="库存数量" prop="stockHistory">
									<el-input type="text" v-model.number="updateForm.stockHistory" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="可售库存" prop="stock">
									<el-input type="text" v-model="updateForm.stock" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="冻结库存" prop="stockForzen">
									<el-input type="text" v-model="updateForm.stockForzen" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="已售库存" prop="stockSold">
									<el-input type="text" v-model="updateForm.stockSold" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品主图" prop="mainImage">
									<el-card shadow="hover" class="el-card-logo">
										<el-image :src="imgMainImageObject.localMainImage">
											<div slot="error" class="image-slot">
												<i>请添加商品主图</i>
											</div>
										</el-image>
									</el-card>
									
									<div style="margin-top: 12px;">
										<el-button type="primary" plain long @click="addMainImagePic" icon="md-add">添加图片</el-button>
										<div style="line-height: 20px; color: red; margin-top: 10px;">温馨提示：请上传256*256像素的PNG、JPG格式的图片，大小不超过2M。</div>
									</div>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="商品缩略图" prop="thumbImage">
									<el-card shadow="hover" class="el-card-logo">
										<el-image :src="imgThumbImageObject.localMainImage">
											<div slot="error" class="image-slot">
												<i>请添加商品缩略图</i>
											</div>
										</el-image>
									</el-card>
									
									<div style="margin-top: 12px;">
										<el-button type="primary" plain long @click="addThumbImagePic" icon="md-add">添加图片</el-button>
										<div style="line-height: 20px; color: red; margin-top: 10px;">温馨提示：请上传256*256像素的PNG、JPG格式的图片，大小不超过2M。</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="备注" prop="remark">
									<el-input type="textarea" :rows="5" v-model="updateForm.remark" placeholder="请输入备注"></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<div class="form-title">
							<h3>系统信息</h3>
						</div>

						<el-row>
							<el-col :span="12">
								<el-form-item label="创建人" prop="creatorId">
									<el-input type="text" v-model="updateForm.creatorId" placeholder="创建人" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="创建世间" prop="createTime">
									<el-date-picker v-model="updateForm.createTime" type="datetime" placeholder="修改时间" readonly style="width: 100%;"></el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="修改人" prop="reviserId">
									<el-input type="text" v-model="updateForm.reviserId" placeholder="修改人" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="修改时间" prop="reviseTime">
									<el-date-picker v-model="updateForm.reviseTime" type="datetime" placeholder="修改时间" readonly style="width: 100%;"></el-date-picker> </el-form-item>
							</el-col>
						</el-row>

					</el-form>
				</div>

				<div class="dialog-footer" slot="footer">
					<el-button type="primary" @click="updateSubmit('updateForm')">保存</el-button>
					<el-button @click="updateDialog =false">取消</el-button>
				</div>
				
				<uploadImage
					:pageStatus="isMainImagePic"
					@on-change="onMainImagePicChange"
					@on-result="onMainImagePicResultUpdatePage"
					:pageData="imgType"
					@on-click="addMainImagePic"
				></uploadImage>
				
				<uploadImage
					:pageStatus="isThumbImagePic"
					@on-change="onThumbImagePicChange"
					@on-result="onThumbImagePicResultUpdatePage"
					:pageData="imgType"
					@on-click="addThumbImagePic"
				></uploadImage>
			</el-dialog>

			<!-- 调价弹框 -->
			<el-dialog title="消费券调价" width="60%" :visible.sync="updatePriceDialog">
				<div class="form-area">
					<el-form ref="updatePriceForm" :model="updatePriceForm" :rules="updatePriceRules"
						label-width="125px" style="height:auto">
						<div class="form-title">
							<h3>调整消费券商品价格</h3>
						</div>
						<el-row>
							<el-col :span="12">
								<el-form-item label="消费券商品名称：">
									<div>{{ updatePriceForm.productName }}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="将原：">
									<div>
										消费券面额 <el-input type="text" v-model="updatePriceForm.remark" disabled
											style="width:20%"></el-input> 元，
										销售金额 <el-input type="text" v-model="updatePriceForm.numberBefore" disabled
											style="width:20%"></el-input> 元
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="调整为：" prop="numberChange">
									<div>
										消费券面额 <el-input type="text" v-model="updatePriceForm.remark" disabled
											style="width:20%"></el-input> 元，
										销售金额 <el-input type="text" v-model="updatePriceForm.numberChange"
											style="width:20%"></el-input> 元
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="16">
								<el-form-item label="调价说明" prop="operateDesc">
									<el-input type="textarea" :rows="5" v-model="updatePriceForm.operateDesc"
										placeholder="请输入调价说明"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>

				<div class="dialog-footer" slot="footer">
					<el-button type="primary" @click="updatePriceSubmit('updatePriceForm')">保存</el-button>
					<el-button @click="updatePriceDialog =false">返回</el-button>
				</div>
			</el-dialog>

			<!-- 加库存弹框 -->
			<el-dialog title="消费券增加库存" width="60%" :visible.sync="addStockDialog">
				<div class="form-area">
					<el-form ref="addStockForm" :model="addStockForm" :rules="addStockRules" label-width="125px"
						style="height:auto">
						<div class="form-title">
							<h3>增加消费券商品库存</h3>
						</div>
						<el-row>
							<el-col :span="12">
								<el-form-item label="消费券商品名称：">
									<div>{{ addStockForm.productName }}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="现有可售库存：" prop="numberBefore">
									<el-input type="text" v-model="addStockForm.numberBefore" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="新增库存数量：" prop="numberChange">
									<el-input type="text" v-model.number="addStockForm.numberChange"
										placeholder="请输入新增库存数量"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="增加库存说明" prop="operateDesc">
									<el-input type="textarea" :rows="5" v-model="addStockForm.operateDesc"
										placeholder="请输入增加库存说明"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>

				<div class="dialog-footer" slot="footer">
					<el-button type="primary" @click="addStockSubmit('addStockForm')">保存</el-button>
					<el-button @click="addStockDialog =false">返回</el-button>
				</div>
			</el-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { findProductCouponListByPage, findProductCouponDetail, addProductCoupon, updateProductCoupon, deleteProductCoupon, operateStatus } from '@api/coupon/productCoupon'
	import { updatePrice, addStock } from '@api/coupon/productCouponLog'
	import uploadImage from '../common/uploadImage'
	import { ossDomain } from '@api/sys.common'
	import dayjs from 'dayjs'
	export default {
		name: 'coupon-productCouponList',
		components: {
			uploadImage
		},
		data() {
			return {
				queryForm: {
					productName: '',
					saleChannel: '',
					status: '',
					createTimeBegin: '',
					createTimeEnd: ''
				},
				time: [],
				pickerOptions: {
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
								picker.$emit('pick', [start, end])
							}
						}
					]
				},
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				multipleSelection: [],
				imgUrlHeader: '', // 图片地址

				imgType: 0,
				isMainImagePic: false,
				imgMainImageObject: {
					localMainImage: '',
					mainImage: ''
				},
				isThumbImagePic: false,
				imgThumbImageObject: {
					localMainImage: '',
					mainImage: ''
				},

				detailDialog: false,
				detailForm: {
					id: '',
					productName: '',
					productCode: '',
					status: '',
					couponDenomination: '',
					couponPrice: '',
					stockHistory: '',
					stock: 0,
					stockForzen: 0,
					stockSold: 0,
					saleChannel: 0,
					couponType: 0,
					mainImage: '',
					thumbImage: '',
					remark: '',
					createId: '',
					createTime: '',
					reviserId: '',
					reviseTime: ''
				},

				addDialog: false,
				addForm: {
					productName: '',
					productShowName: '',
					productCode: '',
					status: '',
					couponDenomination: '',
					couponPrice: '',
					stockHistory: '',
					stock: 0,
					stockForzen: 0,
					stockSold: 0,
					saleChannel: '0', //销售渠道: 0小程序用户 1商家用户 2直播用户
					couponType: '0',
					mainImage: '',
					thumbImage: '',
					remark: ''
				},
				addRules: {
					productName: [{
						required: true,
						message: '请输入消费券商品名称',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}],
					productCode: [{
						required: true,
						message: '请输入消费券商品编码',
						trigger: 'blur'
					}, {
						min: 1,
						max: 32,
						message: '长度在 1 到 32 个字符',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请选择状态',
						trigger: 'blur'
					}],
					couponDenomination: [{
						required: true,
						message: '请输入消费券面额',
						trigger: 'blur'
					}],
					couponPrice: [{
						required: true,
						message: '请输入销售金额',
						trigger: 'blur'
					}],
					stockHistory: [{
						required: true,
						message: '请输入库存数量',
						trigger: 'blur'
					}, {
						type: 'number',
						message: '库存数量必须为数字值'
					}],
					mainImage: [{
						required: true,
						message: '请输入上传主图',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}],
					thumbImage: [{
						required: true,
						message: '请输入上传缩略图',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}],
					remark: [{
						required: true,
						message: '请输入备注',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}]
				},

				updateDialog: false,
				updateForm: {
					productName: '',
					productShowName: '',
					productCode: '',
					status: '',
					couponDenomination: '',
					couponPrice: '',
					stockHistory: '',
					stock: 0,
					stockForzen: 0,
					stockSold: 0,
					saleChannel: '0', //销售渠道: 0小程序用户 1商家用户 2直播用户
					couponType: '0',
					mainImage: '',
					thumbImage: '',
					remark: '',
					createId: '',
					createTime: '',
					reviserId: '',
					reviseTime: ''
				},
				updateRules: {
					productName: [{
						required: true,
						message: '请输入消费券商品名称',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}],
					mainImage: [{
						required: true,
						message: '请输入上传主图',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}],
					thumbImage: [{
						required: true,
						message: '请输入上传缩略图',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}],
					remark: [{
						required: true,
						message: '请输入备注',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}]
				},

				updatePriceDialog: false,
				updatePriceForm: {
					productId: '',
					productName: '',
					remark: '',
					numberBefore: '',
					numberChange: '',
					operateDesc: ''
				},
				updatePriceRules: {
					operateDesc: [{
						required: true,
						message: '请输入调价说明',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}]
				},

				addStockDialog: false,
				addStockForm: {
					productId: '',
					productName: '',
					numberBefore: '',
					numberChange: '',
					operateDesc: ''
				},
				addStockRules: {
					numberChange: [{
						required: true,
						message: '请输入新增库存数量',
						trigger: 'blur'
					}, {
						type: 'number',
						message: '新增库存数量必须为数字值'
					}],
					operateDesc: [{
						required: true,
						message: '请输入调价说明',
						trigger: 'blur'
					}, {
						min: 1,
						max: 128,
						message: '长度在 1 到 128 个字符',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			fetchData() {
				this.loading = true;
				this.queryForm.createTimeBegin = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm.createTimeEnd = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				
				findProductCouponListByPage({
					purchasePlanNo: this.queryForm.purchasePlanNo,
					productName: this.queryForm.productName,
					skuName: this.queryForm.skuName,
					activityProductBatchNo: this.queryForm.activityProductBatchNo,
					saleChannel: this.queryForm.saleChannel,
					status: this.queryForm.status,
					startTime: this.queryForm.createTimeBegin,
					endTime: this.queryForm.createTimeEnd,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.fetchData();
			},
			forDateCreate(row, column) {
				return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
			},
			
			chooseSaleChannel(val) {
				if(val == 0) {
					this.addForm.couponType = '0';
				} if(val == 2 && this.addForm.couponType == 0) {
					this.addForm.couponType = '2';
				}
			},
			chooseSaleChannel2(val) {
				if(val == 0) {
					this.updateForm.couponType = '0';
				} if(val == 2 && this.updateForm.couponType == 0) {
					this.updateForm.couponType = '2';
				}
			},
			
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			submitForm(formName) {
				this.resetPage();
				this.fetchData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.time = [];
				this.resetPage();
				this.fetchData();
			},
			
			detailPage(id) {
				this.detailDialog = true;
				this.detailForm = {
					id: '',
					productName: '',
					productCode: '',
					status: '-1',
					couponDenomination: '',
					couponPrice: '',
					stockHistory: '',
					stock: 0,
					stockForzen: 0,
					stockSold: 0,
					mainImage: '',
					thumbImage: '',
					remark: '',
					createId: '',
					createTime: '',
					reviserId: '',
					reviseTime: ''
				}
				this.getDetail(id, "detail");
			},
			addPage() {
				this.addDialog = true;
				this.addForm = {
					productName: '',
					productCode: '',
					status: '',
					couponDenomination: '',
					couponPrice: '',
					stockHistory: '',
					stock: 0,
					stockForzen: 0,
					stockSold: 0,
					saleChannel: '0', //销售渠道: 0小程序用户 1商家用户 2直播用户
					couponType: '0',
					mainImage: '',
					thumbImage: '',
					remark: ''
				}
				this.imgMainImageObject = {
					localMainImage: '',
					mainImage: ''
				}
				this.imgThumbImageObject = {
					localMainImage: '',
					mainImage: ''
				}
			},
			updatePage(id, status) {
				if (status == 1) {
					this.$message.warning('此商品目前为上架状态，不可进行编辑操作。');
					return;
				}
				this.updateDialog = true;
				
				this.updateForm = {
					productName: '',
					productCode: '',
					status: '-1',
					couponDenomination: '',
					couponPrice: '',
					stockHistory: '',
					stock: 0,
					stockForzen: 0,
					stockSold: 0,
					saleChannel: '0', //销售渠道: 0小程序用户 1商家用户 2直播用户
					couponType: '0',
					mainImage: '',
					thumbImage: '',
					remark: '',
					createId: '',
					createTime: '',
					reviserId: '',
					reviseTime: ''
				}
				this.imgMainImageObject = {
					localMainImage: '',
					mainImage: ''
				}
				this.imgThumbImageObject = {
					localMainImage: '',
					mainImage: ''
				}
				
				this.getDetail(id, "update");
			},
			getDetail(id, pageFlag) {
				this.loading = true;
				findProductCouponDetail({ id: id })
					.then(res => {
						if (pageFlag == 'detail') {
							this.detailForm = res.data;
							this.detailForm.status = res.data.status + '';
							this.detailForm.saleChannel = res.data.saleChannel.toString();
							this.detailForm.couponType = res.data.couponType.toString();
						} else if (pageFlag == 'update') {
							this.updateForm = res.data;
							this.updateForm.status = res.data.status + '';
							this.updateForm.saleChannel = res.data.saleChannel.toString();
							this.detailForm.couponType = res.data.couponType.toString();
							this.imgMainImageObject.localMainImage = this.updateForm.mainImage;
							this.imgThumbImageObject.localMainImage = this.updateForm.thumbImage;
						} else if (pageFlag == 'updatePrice') {
							this.$set(this.updatePriceForm, "productId", res.data.id);
							this.$set(this.updatePriceForm, "productName", res.data.productName);
							this.$set(this.updatePriceForm, "remark", res.data.couponDenomination);
							this.$set(this.updatePriceForm, "numberBefore", res.data.couponPrice);
						} else if (pageFlag == 'addStock') {
							this.$set(this.addStockForm, "productId", res.data.id);
							this.$set(this.addStockForm, "productName", res.data.productName);
							this.$set(this.addStockForm, "numberBefore", res.data.stock);
						}
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			addMainImagePic() {
				this.imgType = 2;
				this.isMainImagePic = !this.isMainImagePic;
			},
			onMainImagePicChange(val) {
				this.isMainImagePic = val; // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			onMainImagePicResultAddPage(val) {
				this.imgMainImageObject = val;
				this.addForm.mainImage = this.imgMainImageObject.mainImage;
			},
			onMainImagePicResultUpdatePage(val) {
				this.imgMainImageObject = val;
				this.updateForm.mainImage = this.imgMainImageObject.mainImage;
			},
			addThumbImagePic() {
				this.imgType = 2;
				this.isThumbImagePic = !this.isThumbImagePic;
				console.log(this.isThumbImagePic)
			},
			onThumbImagePicChange(val) {
				this.isThumbImagePic = val; // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			onThumbImagePicResultAddPage(val) {
				console.log(val)
				this.imgThumbImageObject = val;
				this.addForm.thumbImage = this.imgThumbImageObject.mainImage;
			},
			onThumbImagePicResultUpdatePage(val) {
				this.imgThumbImageObject = val;
				this.updateForm.thumbImage = this.imgThumbImageObject.mainImage;
			},
			
			// 检验金额
			checkPrice(price) {
				let regExp = /^(?:0|[1-9]\d*)(?:\.\d*[1-9])?$/;
				if (!regExp.test(price)) {
					this.$message.warning('金额格式不正确');
					return false;
				}
				if (price == 0) {
					this.$message.warning('金额必须大于0');
					return false;
				}
				return true
			},
			// 获取可售库存
			getStock() {
				if (this.addForm.stockHistory <= 0) {
					this.$message({
						message: "库存数量必须大于0",
						type: "warning"
					});
					return;
				}
				this.addForm.stock = this.addForm.stockHistory;
			},
			// 新增保存
			addSubmit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (!this.checkPrice(this.addForm.couponDenomination)) {
							return;
						}
						if (!this.checkPrice(this.addForm.couponPrice)) {
							return;
						}
						if (this.addForm.stockHistory <= 0) {
							this.$message({
								message: "库存数量必须大于0",
								type: "warning"
							});
							return;
						}
						
						this.loading = true;
						// 提交表单
						addProductCoupon(this.addForm)
							.then(res => {
								if (res.code == '000000') {
									this.$message({
										message: res.message,
										type: "success"
									});
									this.fetchData();
									this.addDialog = false;
									this.loading = false;
								} else {
									this.$message({
										message: res.message,
										type: 'error'
									});
									return;
								}
							})
							.catch(() => {
								console.log("err", err);
								this.loading = false;
							})
					}
				})
			},
			// 编辑保存
			updateSubmit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.loading = true;
						// 提交表单
						updateProductCoupon(this.updateForm)
							.then(res => {
								if (res.code == '000000') {
									this.$message({
										message: res.message,
										type: "success"
									});
									
									this.fetchData();
									this.updateDialog = false;
									this.loading = false;
								} else {
									this.$message({
										message: res.message,
										type: 'error'
									});
									return;
								}
							})
							.catch(() => {
								console.log("err", err);
								this.loading = false;
							})
					}
				})
			},
			// 更新状态
			updateStatus(row, status) {
				this.$confirm("确认" + (status == 0 ? '下架' : '上架') + ("【" + row.productName + "】？")).then(_ => {
					this.loading = true;
					operateStatus({
						id: row.id,
						status: status
					})
						.then(res => {
							if (res.code == '000000') {
								this.$message({
									message: res.message,
									type: "success"
								});
								this.fetchData();
								this.loading = false;
							} else {
								this.$message({
									message: res.message,
									type: 'error'
								});
								return;
							}
						})
						.catch(err => {
							console.log("err", err);
							this.loading = false;
						});
				});
			},
			// 删除
			deleteRow(row) {
				if (row.status == 1) {
					this.$message.warning('此商品目前为上架状态，不可进行删除操作。');
					return;
				}
				this.$confirm('确认删除' + row.productName + '？').then(_ => {
					this.loading = true;
					deleteProductCoupon({
						id: row.id
					})
						.then(res => {
							if (res.code == '000000') {
								this.$message({
									message: res.message,
									type: 'success'
								});
								this.fetchData();
								this.loading = false;
							} else {
								this.$message({
									message: res.message,
									type: 'error'
								});
							}
						})
						.catch(err => {
							console.log('err', err);
							this.loading = false;
						})
				})
			},
			// 调价
			updatePricePage(id, status) {
				if (status == 1) {
					this.$message.warning('此商品目前为上架状态，不可进行调价操作。');
					return;
				}
				this.updatePriceDialog = true;
				this.updatePriceForm = {
					productId: '',
					productName: '',
					remark: '',
					numberBefore: '',
					numberChange: '',
					operateDesc: ''
				}
				this.getDetail(id, "updatePrice");
			},
			// 加库存
			addStockPage(id) {
				this.addStockDialog = true;
				this.addStockForm = {
					productId: '',
					productName: '',
					numberBefore: '',
					numberChange: '',
					operateDesc: ''
				}
				this.getDetail(id, "addStock");
			},
			// 调价保存
			updatePriceSubmit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (!this.checkPrice(this.updatePriceForm.numberChange)) {
							return;
						}
						
						this.loading = true;
						// 提交表单
						updatePrice(this.updatePriceForm)
							.then(res => {
								if (res.code == '000000') {
									this.$message({
										message: res.message,
										type: "success"
									});
									this.fetchData();
									this.updatePriceDialog = false;
									this.loading = false;
								} else {
									this.$message({
										message: res.message,
										type: 'error'
									});
									return;
								}
							})
							.catch(() => {
								console.log("err", err);
								this.loading = false;
							})
					}
				})
			},
			// 加库存保存
			addStockSubmit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (this.addStockForm.numberChange <= 0) {
							this.$message({
								message: "新增库存数量必须大于0",
								type: "warning"
							});
							return;
						}
						
						this.loading = true;
						// 提交表单
						addStock(this.addStockForm)
							.then(res => {
								if (res.code == '000000') {
									this.$message({
										message: res.message,
										type: "success"
									});
									this.fetchData();
									this.addStockDialog = false;
									this.loading = false;
								} else {
									this.$message({
										message: res.message,
										type: 'error'
									});
									return;
								}
							})
							.catch(() => {
								console.log("err", err);
								this.loading = false;
							})
					}
				})
			}
		},
		mounted() {
			this.fetchData();
			this.imgUrlHeader = ossDomain;
		},
		
	}
</script>

<style lang="scss" scoped>
	// 样式请务必加scoped
	.el-card-logo {
		height: 256px !important;
		width: 256px !important;
	}

	.el-card-logo .el-card__body {
		height: 256px !important;
		width: 256px !important;
		padding: 0px !important;
	}
	::v-deep {
		.el-form-item__content {
			line-height: normal!important;
		}
	}
	.el-table {
		::v-deep th.el-table__cell {
			.cell {
				text-align: center;
				padding: 0;
			}
		}
	}
</style>